<template>
	<div id="app" style="background:#F9F9F9">
         <div class="test">
			 <h2>您今年考什么？</h2>
			 <ul class="test-list" id="u-list">
				<li v-for='(item,index) in subjectarr' @click="changeclick(index)">
					 <span :class="Number(indexclick)-1==index?'active-list':''">{{item}}</span>
				</li>
			 </ul>
			 <div class="textimg">
				 <img src="../../assets/image/people.png" alt="">
			 </div>
		 </div>
	<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '@/components/home/Footer'
	export default {
		name:'changesubject',
		components:{
		  Footer
		},
		data() {
			return {	
				subjectarr:['口腔执业助理医师','口腔执业医师','口腔中级医师'],
				indexclick:'',
			};
		},
		 methods:{
           changeclick(index){
			   var that = this;
			   // console.log(index);
			   // console.log(888);
			   that.indexclick = Number(index)+1;
			   localStorage.setItem('othersubject',that.indexclick);
			   setTimeout(function(){
				   that.$router.push({
					path:'/questionindex',
				   })
			   },500)
		   }
	  },
	   mounted(){
		   var that = this;
		    if(localStorage.getItem('othersubject')){
			   var othersubject = localStorage.getItem('othersubject');
			   that.indexclick = Number(othersubject)
		    }
	   }
	}
</script>

<style scoped>
	.test{
		position: relative;
		height: 100%;
		bottom: 1rem;
	}
	.textimg{
		position: absolute;
		bottom: 0;
		right: 0;
		width: 3.78rem;
		height: 9.19rem;
		z-index: 0;
	}
	.textimg img{
		width: 100%;
		height: 100%;
	}
.test h2{
	font-size: 0.62rem;
	padding-top: 3rem;
	color: #333333;
	text-align: center;
	font-weight: 600;
	
}
.test-list{
	width: 5.2rem;
	position: absolute;
	z-index: 99;
	left: 50%;
	margin-left: -2.6rem;
}
.test-list li{
	width: 5.2rem;
	margin: 1rem auto;
	height: 0.88rem;
	line-height: 0.88rem;
	text-align: center;
	font-size: 0.3rem;
	border-radius: 0.5rem;
	border: 0.03rem solid #0287FF;
	overflow: hidden;
}
.test-list li span{
	width: 100%;
	display: inline-block;
}
.active-list{
	background:linear-gradient(0deg,rgba(2,135,255,1),rgba(66,146,255,1));
	color: #fff;
	border: none !important;
}
</style>
